<template>
  <div class="x-axis-tools">
    <fold :title="'y轴'">
      <div class="content">
        <div>
          <span>显示：</span>
          <el-switch v-model="the_y_axis_show" @change="setYAxisShow"></el-switch>
        </div>
        <div>
          <span>名称：</span>
          <el-input size="mini" v-model="the_y_axis_name" @change="setYAxisName"></el-input>
        </div>
        <div>
          <span>显示位置：</span>
          <el-select
            size="mini"
            v-model="the_name_location"
            placeholder="请选择"
            @change="setNameLocation"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <span>偏移位：</span>
          <el-input-number size="mini" v-model="the_offset" @change="setOffset"></el-input-number>
        </div>
        <div>
          <span>位置：</span>
          <el-select size="mini" v-model="the_position" placeholder="请选择" @change="setPosition">
            <el-option
              v-for="item in positions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <div style="display:flex;align-content:center;">
            <span>名称颜色：</span>
            <el-color-picker v-model="the_color" size="mini" @change="setColor"></el-color-picker>
          </div>
        </div>
        <div>
          <span>名称大小：</span>
          <el-slider v-model="the_fontsize" @change="setFontSize"></el-slider>
        </div>
      </div>
    </fold>
  </div>
</template>

<script>
import Fold from "@/components/common/Fold.vue";

export default {
  components: {
    Fold,
  },
  props: [
    "yAxisShow",
    "yAxisName",
    "nameLocation",
    "offset",
    "position",
    "color",
    "fontSize",
  ],
  created() {},
  data() {
    return {
      the_y_axis_show: this.yAxisShow,
      the_y_axis_name: this.yAxisName,
      the_name_location: this.nameLocation,
      the_offset: this.offset,
      the_position: this.position,
      the_color: this.color,
      the_fontsize: this.fontSize,

      options: [
        {
          value: "start",
          label: "起始",
        },
        {
          value: "middle",
          label: "居中",
        },
        {
          value: "end",
          label: "结束",
        },
      ],
      positions: [
        {
          value: "top",
          label: "顶部",
        },
        {
          value: "bottom",
          label: "底部",
        },
      ],
    };
  },
  methods: {
    setYAxisShow(val) {
      this.$store.commit("setChartActiveYAxisShow", val);
    },
    setYAxisName(val) {
      this.$store.commit("setChartActiveYAxisName", val);
    },
    setNameLocation(val) {
      this.$store.commit("setChartActiveYAxisLocation", val);
    },
    setOffset(val) {
      this.$store.commit("setChartActiveYAxisOffset", val);
    },
    setPosition(val) {
      this.$store.commit("setChartActiveYAxisPosition", val);
    },
    setColor(val) {
      this.$store.commit("setChartActiveYAxisColor", val);
    },
    setFontSize(val) {
      this.$store.commit("setChartActiveYAxisFontSize", val);
    },
  },
};
</script>

<style scoped>
.x-axis-tools {
  margin-top: 5px;
}

.content > div {
  margin-bottom: 10px;
}
</style>